<template>
  <div>
    <TopFilter ref="formpanel" :list="formList" :cols="3" :rows="1" labelWidth="75" @filterChange="changeHandle"></TopFilter>

    <FilterTable
      ref="table"
      :columns="columns"
      :isColumnFilter="false"
      columnsRef="PartTable"
      :isToperInfo="false"
      :params="fetchParams"
      :fetchapi="fetchApi"
      selectionType="single"
      :datakey="'rows'"
      height="180px"
      :onSyncTableData="changetablelist"
      :onRowSelectChange="selectChangeHandle"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <!-- :fetchapi="fetchApi" -->
    </FilterTable>
    <br />
    <br />
    <!-- <FormPanel
      ref="formpanel"
      :list="formList1"
      :cols="3"
      labelWidth="105"
      @formChange="formchangeFun"
      :isSubmitBtn="false"
    />-->
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button @click="closeDialog">取消</el-button>
    </div>
  </div>
</template>
<script>
import { searchRoList } from '@/api/repair/quaback';
import { dictionary } from '@/utils/dictMixin';
export default {
  mixins: [dictionary],
  data() {
    return {
      formList: this.createFrom(),
      // formList1: this.createFrom1(),
      columns: this.createTableColumns(),
      fetchApi: searchRoList,
      fetchParams: {},
      selectRow: []
    };
  },
  methods: {
    createFrom() {
      return [
        {
          type: 'INPUT',
          label: '工单号',
          fieldName: 'roNo'
          // disabled: true
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          rules: [{ pattern: /^(\w){17,17}$/, message: '请输入正确的VIN', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '工单类型',
          fieldName: 'roType',
          itemList: this.createDictList('8068')
          // disabled: true
        },
        {
          type: 'INPUT',
          label: '行驶里程',
          fieldName: 'inMileage'
        },
        {
          type: 'INPUT',
          label: '送修人',
          fieldName: 'deliverer'
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          rules: [{ pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/, message: '请输入正确的车牌号', trigger: 'blur' }]
        },
        {
          type: 'RANGE_DATE',
          label: '开单日期',
          fieldName: 'roCreateDateBegin|roCreateDateEnd',
          valueFormat: 'yyyy-MM-dd'
        },
        {
          type: 'INPUT',
          label: '送修人手机',
          fieldName: 'delivererMobile',
          rules: [
            // { required: true, trigger: 'blur', validator: delivererMobile },
            // { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' }/^1[2-9]\d{9}$/,
            { pattern: /^1[3456789]\d{9}$/, message: '手机号码有误', trigger: 'blur' }
          ]
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          align: 'center',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '工单号',
          width: 120,
          showOverflowTooltip: true,
          dataIndex: 'roNo',
          sorter: true,
          filter: true
        },
        {
          title: 'VIN',
          width: 150,
          showOverflowTooltip: true,
          dataIndex: 'vin',
          sorter: true,
          filter: true
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          sorter: true,
          filter: true
        },
        {
          title: '行驶里程',
          dataIndex: 'inMileage',
          sorter: true,
          filter: true
        },
        {
          title: '开单日期',
          dataIndex: 'roCreateDate',
          sorter: true,
          filter: true
          // hidden: true
        },
        {
          title: '送修人',
          dataIndex: 'deliverer',
          showOverflowTooltip: true,
          sorter: true,
          filter: true
          // render: props => {
          //   const pyt = pinyin(props.row.labourName, { style: 4 })
          //     .join('')
          //     .toUpperCase();
          //   return <span>{pyt}</span>;
          // }
        },
        {
          title: '送修人移动电话',
          width: 150,
          dataIndex: 'delivererMobile',
          sorter: true,
          filter: true
          // render: props => {
          //   return <span>{this.createDictText(props.row.isCommonIdentity, '1004')}</span>;
          // }
        }
      ];
    },
    // createFrom1() {
    //   return [
    //     {
    //       type: 'INPUT',
    //       label: '最大命中数',
    //       fieldName: 'costomerCode'
    //       // disabled: true
    //     },

    //     {
    //       type: 'INPUT',
    //       label: '委托书编号',
    //       fieldName: 'VIN'
    //     },
    //     // {
    //     //   type: 'INPUT',
    //     //   label: '送修人',
    //     //   fieldName: 'VIN'
    //     // },
    //     // {
    //     //   type: 'INPUT',
    //     //   label: '拍照号',
    //     //   fieldName: 'VIN'
    //     // },
    //     {
    //       type: 'DATE',
    //       label: '送修日期',
    //       fieldName: 'date23'
    //     },
    //     // {
    //     //   type: 'INPUT',
    //     //   label: 'VIN',
    //     //   fieldName: 'VIN'
    //     // },
    //     {
    //       type: 'INPUT',
    //       label: '送修人移动电话',
    //       fieldName: 'VIN'
    //     }
    //     // {
    //     //   type: 'SELECT',
    //     //   label: '委托书类别',
    //     //   fieldName: 'mobile',
    //     //   itemList: []
    //     //   // disabled: true
    //     // }
    //   ];
    // },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },

    changetablelist() {},
    selectChangeHandle(val) {
      console.log('val', val);
      this.selectRow = val;
    },

    formchangeFun() {},

    submit() {
      if (this.selectRow.length < 1) {
        this.$notify.error({ title: '提示信息', message: '请选择数据' });
      } else {
        this.$emit('close', 'submit', this.selectRow[0]);
      }
    },
    closeDialog() {
      this.$emit('close', 'close');
    }
  }
};
</script>
<style lang="less" scoped></style>
